{% extends "base/nav.html" %}

{% block title %}首页 - 我的网站{% endblock %}

{% block css %}
<style>
.article-title {
    color: #333;
    text-decoration: none;
}
.article-title:hover {
    color: #007bff;
    text-decoration: none;
}
.article-item {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.article-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.article-excerpt {
    color: #666;
    line-height: 1.7;
    font-size: 1em;
}
.jumbotron {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin-top: 20px;
    border-radius: 15px;
}
.category-stats {
    margin-top: 20px;
}
.article-meta {
    font-size: 0.9em;
    color: #6c757d;
}
.read-more-btn {
    margin-top: 10px;
}
.panel {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}
.panel-heading {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6;
    border-radius: 10px 10px 0 0 !important;
    padding: 15px 20px;
}
.panel-title {
    color: #495057;
    font-weight: 600;
    margin: 0;
}
.list-group-item {
    border: 1px solid #e9ecef;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
}
.list-group-item:first-child {
    border-top: none;
    border-radius: 0;
}
.list-group-item:last-child {
    border-bottom: none;
    border-radius: 0;
}
</style>
{% endblock %}

{% block content %}
<!-- 欢迎区域 -->
<div class="jumbotron">
    <div class="container">
        <h1>欢迎来到小说文章网站</h1>
        <p>这里是一个分享设计作品的平台，展示各种创意和灵感</p>
        <p><a class="btn btn-primary btn-lg" href="{% url 'main:my_articles_all' %}" role="button">浏览所有作品</a></p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- 最新文章 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">最新设计作品</h3>
            </div>
            <div class="panel-body">
                {% for article in latest_articles %}
                    <div class="article-item">
                        <h4>
                            <a href="{% url 'main:article_detail' article.pk %}" class="article-title">
                                {{ article.title }}
                            </a>
                        </h4>
                        <p class="article-meta">
                            <small>
                                <i class="far fa-calendar"></i>
                                发布于 {{ article.created_at|date:"Y-m-d" }}
                                {% if article.category %}
                                    | <i class="far fa-folder"></i>
                                    分类: <a href="{% url 'main:my_article' article.category.pk %}">{{ article.category.title }}</a>
                                {% endif %}
                            </small>
                        </p>
                        <p class="article-excerpt">
                            {# 使用 striptags 去除 HTML 标签，然后截取纯文本内容 #}
                            {{ article.content|striptags|truncatewords:30 }}
                        </p>
                        <a href="{% url 'main:article_detail' article.pk %}" class="btn btn-primary btn-sm read-more-btn">阅读全文</a>
                    </div>
                    {% if not forloop.last %}<hr style="margin: 25px 0; border-color: #f0f0f0;">{% endif %}
                {% empty %}
                    <div class="alert alert-info text-center">
                        <h4><i class="far fa-file-alt"></i> 暂无设计作品</h4>
                        <p>还没有人发布作品，成为第一个分享创意的人吧！</p>
                        {% if request.user.is_authenticated %}
                            <a href="{% url 'users:article_create' %}" class="btn btn-success">发布作品</a>
                        {% else %}
                            <a href="{% url 'users:log' %}" class="btn btn-primary">登录发布</a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- 分类统计 -->
        <div class="panel panel-default category-stats">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fas fa-chart-pie"></i> 作品分类</h3>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <a href="{% url 'main:my_articles_all' %}">
                            <i class="fas fa-list"></i> 所有作品
                        </a>
                        <span class="badge" style="background: linear-gradient(45deg, #667eea, #764ba2);">{{ total_articles }}</span>
                    </li>
                    {% for category in categories %}
                        <li class="list-group-item">
                            <a href="{% url 'main:my_article' category.pk %}">
                                <i class="far fa-folder"></i> {{ category.title }}
                            </a>
                            <span class="badge" style="background: #6c757d;">{{ category.article_set.count }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <!-- 快速链接 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fas fa-bolt"></i> 快速操作</h3>
            </div>
            <div class="panel-body">
                {% if request.user.is_authenticated %}
                    <a href="{% url 'users:article_create' %}" class="btn btn-success btn-block" style="margin-bottom: 10px;">
                        <i class="fas fa-plus"></i> 发布新作品
                    </a>
                    <a href="{% url 'users:articles_list' %}" class="btn btn-primary btn-block">
                        <i class="fas fa-cog"></i> 管理我的作品
                    </a>
                {% else %}
                    <a href="{% url 'users:log' %}" class="btn btn-primary btn-block" style="margin-bottom: 10px;">
                        <i class="fas fa-sign-in-alt"></i> 登录发布作品
                    </a>
                    <a href="{% url 'users:reg' %}" class="btn btn-outline-secondary btn-block">
                        <i class="fas fa-user-plus"></i> 注册账号
                    </a>
                {% endif %}
            </div>
        </div>

        <!-- 网站统计 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fas fa-chart-bar"></i> 网站统计</h3>
            </div>
            <div class="panel-body text-center">
                <div class="row">
                    <div class="col-xs-6">
                        <h4 style="color: #667eea; margin-bottom: 5px;">{{ total_articles }}</h4>
                        <small class="text-muted">总作品数</small>
                    </div>
                    <div class="col-xs-6">
                        <h4 style="color: #764ba2; margin-bottom: 5px;">{{ categories.count }}</h4>
                        <small class="text-muted">分类数量</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}